<template>
  <div align="center">

    <el-form :model="editForm" label-width="80px" style="width: 500px">
      <el-form-item label="部门名称">
        <el-input v-model="editForm.name" style="width: 300px" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="上级部门">
        <!--        <el-button type="success" @click="selectDept">请点击选择部门</el-button>-->
        <el-input v-model="editForm.parentName" style="width: 300px" readonly="readonly" placeholder="请选择" @focus="openDeptDialog" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="editForm.contacts" style="width: 300px" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="排序号">
        <el-input v-model="editForm.orderNum" style="width: 300px" placeholder="请输入排序号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="toList">返回列表</el-button>
        <el-button type="success" round @click="editSubmit">确定编辑</el-button>
      </el-form-item>
    </el-form>

    <!--  //////  部门树 对话框  //////  -->
    <el-dialog
      title="提示"
      :visible.sync="deptDialog"
      width="30%"
      close-on-press-escape
    >
      <span>
        <el-tree :data="depttree" :props="defaultProps" @node-click="handleNodeClick" />
      </span>
      <span slot="footer" class="dialog-footer" />
    </el-dialog>
    <!--  //////  部门树 对话框  //////  -->
  </div>
</template>

<script>
export default {
  name: 'Edit',
  data() {
    return {
      parentName: '',
      deptDialog: false,
      editForm: {},
      deptId: 0,
      depttree: [],
      defaultProps: {
        children: 'sysDeptList',
        label: 'name'
      }
    }
  },
  created() {
    this.initData()
    this.initDeptId()
    this.initFrom()
  },
  methods: {
    openDeptDialog() {
      this.deptDialog = true
    },
    handleNodeClick(data) {
      // console.log(data);
      // this.deptDialog=false;
      this.editForm.parentName = data.name
      this.editForm.parentId = data.deptId
      this.deptDialog = false
    },
    editSubmit() {
      this.editForm.deptId = this.deptId
      this.axios.post('http://localhost:9999/system-management/sysDept/editDept', this.editForm).then((response) => {
        console.log(response.data)
        if (response.data.code === '200') {
          alert('编辑成功')
          this.toList()
        } else {
          alert('编辑失败')
        }
      })
    },
    toList() {
      // this.$router.replace({ path: 'DeptEdit' })
      this.$router.push({
        path: 'SysDept'
      })
    },
    initDeptId() {
       if (this.$route.query) {
        this.deptId = this.$route.query.deptId
      }
      //this.deptId = this.$route.query.deptId
      // var item = localStorage.getItem("deptId");
      // this.deptId=item
    },
    initFrom() {
      var deptId = this.$route.query.deptId
      console.log(deptId + '///////////////////')
      if (deptId <= 0) {
        this.editForm = {}
      } else {
        this.axios.get('http://localhost:9999/system-management/sysDept/findByDeptId', {
          params: {
            deptId: deptId
          }
        }).then((response) => {
          console.log(response.data)
          if (response.data.obj != null) {
            this.editForm = response.data.obj
          }
        })
      }
    },
    initData() {
      this.axios.get('http://localhost:9999/system-management/sysDept/list').then((response) => {
        console.log(response.data)
        if (response.data.obj != null) {
          this.depttree = response.data.obj
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
